<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="validausuario.jsp"%>
<%@ page import="com.are.odisea.*"%>
<%@ page import="java.util.*"%>
<%
	db conexion = new db();

	String cedula = (String)request.getParameter("cedula");
	GestionPersonal gp = new GestionPersonal(conexion);
	Personal personal = new Personal();
	if ( gp.Find(cedula)) {
		personal = gp.getPersonal();
	}else {
		conexion.Close();
		response.sendRedirect("StatusAsignaciones.jsp");
		return;
	}
	
	ArrayList<OrdenMantenimiento> lista = new ArrayList<OrdenMantenimiento>();
	GestionMantenimiento gm = new GestionMantenimiento(conexion,null);
	lista = gm.ListAsignadas(cedula);
	
	int fila = 1;

%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mapa Ordenes Asignadas</title>
<link rel="stylesheet" href="themes/redmond/jquery.ui.all.css">
<link rel="stylesheet" TYPE="text/css" HREF="main.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="ui/jquery.ui.core.js" language="JavaScript"></script>
<script src="ui/jquery.ui.widget.js" language="JavaScript"></script>
<script src="ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<style type="text/css">
  #map_canvas { width: 780px; height: 400px; margin-top: 10px }
</style>
<script type="text/javascript">
$(function() {
	$( "#btn_close" ).button();
});
</script>

<script type="text/javascript">
var map;
var geocoder;
function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(6.708254,-72.861328);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
<% if (lista.size() > 0)  {   %>
    
    var markers = [];
	var info = [];
	var infowindow = new google.maps.InfoWindow({
        content: ''
    });
	var i=1;
    <%	for (OrdenMantenimiento orden : lista) {  %>
    <%  if (!orden.getLatitud().equals("0") && !orden.getLongitud().equals("0") ) { %>
	
    
    		var posicion = new google.maps.LatLng(<%= orden.getLatitud().replace(",",".") %>,<%= orden.getLongitud().replace(",",".") %>);
		   	var marker = new google.maps.Marker({ //opciones
		        position: posicion,
		        map:map,
		        icon: "images/<%=orden.getProducto().toLowerCase() %>.png"
		        
		    });
		   	var contenido ="<B>INFORMACION AVERIA</b><br/>Orden:<b><%= orden.getOrden()  %></b><br/>Direccion: <b><%= orden.getDireccion() %></b><br/>Producto: <b><%= orden.getProducto() %></b><br/>Fecha de Orden: <b><%=orden.getFecha_orden() %></b><br/>Latitud: <b><%= orden.getLatitud() %></b><br/>Longitud: <b><%= orden.getLongitud() %></b>" ;
		    //var contenido = "";
		   	markers.push(marker);
		   	info.push(contenido);
			if (i==1) {
				map.setCenter(posicion);
				map.setZoom(13);
				
			}
			i++;
    
	<% } %>
	
    <%  }    %>
      
      for (var x = 0, j = info.length; x < j; x++) {
	        var contenido = info[x];
	        var marker = markers[x];
	        (function(marker, contenido){                       
	            google.maps.event.addListener(marker, 'click', function() {
	                infowindow.setContent(contenido);
	                infowindow.open(map, marker);
	            });
	        })(marker,contenido);
	    }
    	
    <% } %>

}
</script>
</head>
<body onload="javascript:initialize();">
<h2>Ordenes de mantenimiento asignadas</h2>
<h2>Tecnico: <%= personal.getNombres() %></h2>
<a href = "javascript:window.close()" id ="btn_close">Cerrar</a>
<div id="map_canvas"></div>
<p>
<img alt="Linea Basica" src="images/lb.png"> Linea Basica
<img alt="Linea Basica" src="images/ba.png"> Banda Ancha
<img alt="Linea Basica" src="images/tv.png"> Television
</p>
</body>
</html>
<%
	conexion.Close();
%>